<%-- 
    Document   : RRHH_PLANILLA_CELULARES
    Created on : 13-ene-2015, 17:23:19
    Author     : equipo_4
--%>

<%@page import="java.util.GregorianCalendar"%>
<%@page import="java.util.Calendar"%>
<%@page import="Conexion.Conexion"%>
<%@page import="RRHH_Modelo.RHH_USUARIO"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>BROKER</title>
        <link rel="stylesheet" href="../css/NuevoStilo.css">
        <script src="../login/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <%
            RHH_USUARIO usuario = ((RHH_USUARIO)request.getSession().getAttribute("usr"));
            Conexion con = new Conexion(usuario.getPASSWORD(), usuario.getPASSWORD()); 
            Calendar c = new GregorianCalendar();
            int ano = c.get(Calendar.YEAR);
            int mes = c.get(Calendar.MONTH)+1;
        %>
        <div id="tituloFormulario">PLANILLA DE CELULARES</div>      
        <div style="margin-top: -58px;position: fixed;" id="entreperiodo">
            <span class="negrillaenter">Periodo</span>
            <input type="text" id="año" placeholder="AÑO" class="chico">
            <select id="mes" >                                            
                <option value="1">ENERO</option>
                <option value="2">FEBRERO</option>
                <option value="3">MARZO</option>
                <option value="4">ABRIL</option>
                <option value="5">MAYO</option>
                <option value="6">JUNIO</option>
                <option value="7">JULIO</option>
                <option value="8">AGOSTO</option>
                <option value="9">SEPTIEMBRE</option>
                <option value="10">OCTUBRE</option>
                <option value="11">NOVIEMBRE</option>
                <option value="12">DICIEMBRE</option>
            </select>
        </div>
        <table>
            <thead>
                <th>NOMBRE</th>
                <th>CI</th>
                <th>CORTO</th>
                <th>TELEFONO</th>
                <th>CIA</th>
                <th>MONTO ASIGNADO</th>
                <th>MONTO FACTURADO</th>
                <th>DESCUENTO</th>
            </thead>
            <tbody id="escritura">
                
            </tbody>
        </table>
        <br><br>        
        <div id="popUpbackGround" onclick="salir();"></div>
        <table class="popup" id="tab">
            <thead>
                <th>TELEFONO</th>
                <th>OBSERBACION</th>
            </thead>
            <tbody id="escritura2">
                
            </tbody>
        </table>
        <div class="centrado" id="eventos">
            <form id="form">
                <input type="hidden" name="evento" value="cargar"/>
                <input type="hidden" name="ano" value="0"/>
                <input type="hidden" name="mes" value="0"/>
                Importar TXT:<input type="file"  accept="text/plain"  name="importado" style="width: 90px;" onchange="validar()"/>
            </form>
            <button type="button" onclick="guardar();">GUARDAR</button>
            <button type="button" onclick="pagar();" id="pagar">PAGAR</button>            
        </div>
        <button type="button" onclick="reabrir();" id="re-abrir" style="display: none;">RE ABRIR</button>
        <script type="text/javascript">
            var url = "../RRHH_PLANILLA_CELULARES_CONTROLLER";                        
            var ano = <%out.print(ano);%>;
            var mes= <%out.print(mes);%>;            
            
            $("#mes").change(function (){
                mes = $(this).find("option:selected").val();
                llenartabla(ano,mes);
            });
            
            function reabrir()
            {
                $("#eventos").css("display","block");
                $("#re-abrir").css("display","none");    
            }
            
            $("#año").keyup(function(e){
                if(e.keyCode==13){
                     ano = $(this).val();
                     llenartabla(ano,mes);
                }
            });
            
            function guardar()
            {
                $("input[name=evento]").val("guardar");
                var formData = new FormData($("#form")[0]);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data:  formData,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data, textStatus, jqXHR)
                    {
                        if(data!=="false")
                        {
                            $("#pagar").css("display","inline");
                        }
                        else
                            alert("No se logro insertar correctamente.");
                            
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {
                         alert("No se logro insertar correctamente.");
                    }         
                });
            }
            
            function salir()
            {
                $("#popUpbackGround").css("display","none");
                $("#tab").css("display","none");
            }
            
            $(document).ready(function (){
                $("#año").val(ano);
                $("#mes option[value="+mes+"]").attr("selected","selected");                
                llenartabla(ano,mes);
            });
            
            function validar()
            {
                $("input[name=evento]").val("cargar");
                var formData = new FormData($("#form")[0]);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data:  formData,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data, textStatus, jqXHR)
                    {
                        if(data!=="false")
                        {
                            var json = $.parseJSON(data);   
                            $("#escritura").html(json.tabla1);
                            $("#escritura2").html(json.tabla2);
                            $("#popUpbackGround").css("display","block");
                            $("#tab").css("display","block");
                        }
                        else
                            alert("ERROR EN EL DOCUMENTO INGRESADO");
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {
                         alert("No se logro insertar correctamente.");
                    }         
                });
            }
            
            function pagar()
            {
                $.post(url,{evento:"pagar",ano:ano,mes:mes},function(resp){
                    if(resp==="true")
                        $("#eventos").css("display","none");
                        $("#re-abrir").css("display","inline");    
                });
            }
            
            function llenartabla(ano,mes)
            {
                $("input[name='ano']").val(ano);
                $("input[name='mes']").val(mes);
                $.post(url,{evento:"llenartabla",ano:ano,mes:mes},function(resp){
                    var json = $.parseJSON(resp);   
                    $("#escritura").html(json.tabla);
                    
                    if(parseInt(json.estado)===0)
                    {
                        $("#eventos").css("display","none");
                        $("#re-abrir").css("display","inline");                        
                    }
                    else
                    {
                        $("#eventos").css("display","block");
                        $("#re-abrir").css("display","none");    
                    }
                    
                    if(parseInt(json.llena)===0)
                        $("#pagar").css("display","inline");
                    else
                        $("#pagar").css("display","none");
                });
            }
            
        </script>
    </body>
</html>
